<template>
	<view class="top-tabbar-wrap" v-if="!$wechat.isWechat()">
		<view :style="{backgroundColor:backColor}" class="top-tabBer">
			<view class="iconfont back" @click="iconsClick" v-show="!isIcon"></view>
			<view class="iconfont back" @click="iconsClick" v-show="isIcon" :class="titleStatus ? 'titleIconColor' : ''">&#xe60e;</view>
			<view class="contont" v-if="tabTitle" :class="titleStatus ? 'titleIconColor' : ''">{{tabTitle}}</view>
			<view class="tab-right">
				 <slot name="tab-right"></slot>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			isIcon:{
				type: Boolean,
				default: true
			},
      titleStatus: {
        type: Boolean,
        default: false
      },
			tabTitle:'',
			backColor:{
				type:'',
			},
		},
		mounted() {
		},
		data() {
			return {
				statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
			}
		},
		methods:{
			iconsClick() {
				this.$emit("click")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-tabBer{
    width: 100%;
		height: 176rpx;
		display: flex;
		align-items: center;
		padding: 88rpx 28rpx 0rpx 28rpx;
		.back{
			flex: 1;
      color: #FFFFFF;
      font-size: 36rpx;
		}
		.contont{
			flex: 2;
			text-align: center;
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #F4F4F4;
		}
		.tab-right{
			flex: 1;
			text-align: right;
			color: #FFFFFF;
			font-size: 48rpx;
		}
	}
  .titleIconColor{
      color: #262626 !important;
  }
</style>

